<template>
  <div>
    <div class="demo-image__lazy">
      <el-image
        v-for="url in CartoonList.CartoonUrlList"
        :key="url"
        :src="url"
        lazy
      ></el-image>
             <div id="CartoonBtton">
           <el-button id="NextBtton" type="primary" style="width:200px;">下一话</el-button>
       </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Head",
  data() {
    return {
      CartoonList: {},
    };
  },
  created() {
    this.CartoonList = {
      LastChapterID: "20",
      NextChapterID: "30",
      ComicID:"2",
      CartoonUrlList: [
        require("../ImgTop6/001.jpg"),
        require("../ImgTop6/002.jpg"),
        require("../ImgTop6/003.jpg"),
        require("../ImgTop6/004.jpg"),
        require("../ImgTop6/005.jpg"),
        require("../ImgTop6/006.jpg"),
        require("../ImgTop6/001.jpg"),
        require("../ImgTop6/002.jpg"),
        require("../ImgTop6/003.jpg"),
        require("../ImgTop6/004.jpg"),
        require("../ImgTop6/005.jpg"),
        require("../ImgTop6/006.jpg"),
        require("../ImgTop6/001.jpg"),
        require("../ImgTop6/002.jpg"),
        require("../ImgTop6/003.jpg"),
        require("../ImgTop6/004.jpg"),
        require("../ImgTop6/005.jpg"),
        require("../ImgTop6/006.jpg"),
        require("../ImgTop6/001.jpg"),
        require("../ImgTop6/002.jpg"),
        require("../ImgTop6/003.jpg"),
      ],
    };
  },
};
</script>



<style>
.demo-image__lazy {
  width: 800px;
  margin: 0px auto;
  /* border: 1px solid black; */
}
#CartoonBtton{
    margin-bottom: 80px;
}
#NextBtton{
    margin-left:300px ;
    margin-top: 20px;
    font-size: 20px;
}
body{
    background-color: rgb(48, 48, 48);
}
</style>